"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Eye, EyeOff, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { loginUser } from "@/app/actions/auth-actions"


// 登录表单组件，使用学号和密码进行身份验证
export function LoginForm() {
  const router = useRouter()
  const [account_id, setAccount_id] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  // 处理表单提交
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setIsLoading(true)

    try {
      // 调用登录操作
      const result = await loginUser({ account_id, password })

      if (result.success) {
        router.push("/dashboard")
      } else {
        setError(typeof result.message === 'string'
            ? result.message
            : "登录失败，请检查您的凭据。")
      }
    } catch (err) {
      setError("发生意外错误，请重试。")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {error && (
        <Alert variant="destructive">
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      <div className="space-y-2">
        <Label htmlFor="account_id">学工号</Label>
        <Input
          id="account_id"
          placeholder="请输入学号/教工号"
          value={account_id}
          onChange={(e) => setAccount_id(e.target.value)}
          required
        />
      </div>

      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <Label htmlFor="password">密码</Label>
          <Button
              variant="link"
              className="text-sm text-primary hover:underline p-0"
              onClick={() => alert("忘记密码功能正在开发中，请联系管理员重置密码")}
          >
            忘记密码？
          </Button>
        </div>
        <div className="relative">
          <Input
            id="password"
            type={showPassword ? "text" : "password"}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
            onClick={() => setShowPassword(!showPassword)}
            tabIndex={-1}
          >
            {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
            <span className="sr-only">{showPassword ? "隐藏密码" : "显示密码"}</span>
          </Button>
        </div>
      </div>

      <Button type="submit" className="w-full" disabled={isLoading}>
        {isLoading ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            登录中...
          </>
        ) : (
          "登录"
        )}
      </Button>

      <div className="text-center text-sm">
        还没有账号？{" "}
        <Link href="/register" className="text-primary hover:underline">
          立即注册
        </Link>
      </div>
    </form>
  )
}

